//中间海报菜单区域
.menu-banenr {
    margin: 25px auto 0;
    height: 451px;
    max-width: 2452px;

    .menu {
        position: absolute;
        width: 230px;
        height: 450px;
        z-index: 99;
    }

    //二级菜单
    .menu ul {
        background: rgba(105, 101, 101, .6);
        width: 230px;
        height: 450px;
        padding-top: 18px;
        box-sizing: border-box;

        li {
            text-indent: 2em;
            font-size: 14px;
            line-height: 32px;
            height: 32px;

            a {
                margin-right: 15px;
                color: #ffffff;
            }

            span {
                color: #ffffff;
            }

            //内容盒子
            .menuContent {
                width: 400px;
                height: 450px;
                position: absolute;
                top: 0;
                left: 234px;
                background-color: #fff !important;
                border: 2px solid rgb(156, 79, 79);
                border-radius: 5px;
                box-sizing: border-box;
                display: none;
            }
        }

        :hover {
            background-color: #ff6700;
        }
    }

    //大轮播图样式
    .banenr {
        .target {
            width: 1200px;
            ;
            height: 450px;
            overflow: hidden;
            position: relative;
            margin: 0 auto;
        }

        .target img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .hy-dot i {
            width: 55px !important;
            height: 5px !important;
            border-radius: 0;
        }

        // 左边的箭头
        .hy-prev {
            left: 236px;
        }


    }
}

// swiper轮播图
// 左边按钮背景
.swiper-button-prev{
    width: 42px !important;
    height: 85px !important;
    background-color:rgba(171, 171, 171, .5) !important;
    line-height: 85px !important;
    border-top-right-radius: 85px;
    border-bottom-right-radius: 85px;
    left: 0 !important;
    padding-right: 6px;
    box-sizing: border-box;
}

//右边按钮背景
.swiper-button-next{
    width: 42px !important;
    height: 85px !important;
    background-color:rgba(171, 171, 171, .5) !important;
    line-height: 85px !important;
    border-top-left-radius: 85px;
    border-bottom-left-radius: 85px;
    right: 0 !important;
    padding-left: 6px;
    box-sizing: border-box;
}
// 左右按键
.swiper-button-next:after,
.swiper-button-prev:after {
    display: inline-block;
    color: white; 
    font-size: 30px !important; 
}

// 内容第一部分
.content1 {
    background-color: #f4f4f4;
    padding-top: 25px;
    box-sizing: border-box;
    padding-bottom: 50px;

    // 小海报区域
    .small-banenr {
        display: flex;
        justify-content: space-between;

        img {
            width: 285px;
            height: 154px;
            transition: all .2s;
        }

        img:hover {
            box-shadow: 4px 20px 40px 5px rgba(0, 0, 0, .1);
            /* 盒子向上移动效果，改变上外边距 */
            margin-top: -3px;
        }
    }

    // 广告区域
    .ad {
        background: url(../imgs/ad.png) no-repeat;
        height: 100px;
        margin: 25px 0;
    }

    // 秒杀部分
    .seckill {
        background: url(../imgs/miasha.png) no-repeat;
        width: 228px;
        height: 285px;
        background-size: 228px 285px;
        overflow: hidden;

        p {
            font-size: 24px;
            margin-top: 50px;
            text-align: center;
            color: white;
        }

        // 倒计时区域
        .time {

            margin-top: 88px;
            margin-left: 20px;

            p {
                text-align: center;
                margin-top: 20px;
                margin-bottom: 20px;
                transform: translateX(-13px);
            }

            span {
                width: 40px;
                height: 45px;
                float: left;
                background-color: #666;
                font-size: 24px;
                text-align: center;
                line-height: 45px;
                color: white;
                position: relative;
            }

            span:nth-of-type(2) {
                margin: 0 34px 0 34px;
            }

            span:after {
                width: 34px;
                height: 45px;
                content: ':';
                position: absolute;
                left: 40px;
            }

            span:last-child::after {
                content: '';
            }
        }
    }

    // 小轮播图
    .small-slideshow {
        width: 956px;
        height: 285px;
        .target{
            width: 100%;
            height: 100%;
            .hy-dot{
                display: none;
            }
        }

        ul {
            display: flex;
            justify-content: space-between;

            li {
                width: 228px;
                height: 285px;
                background-color: #fff;
                padding: 15px;
                box-sizing: border-box;

                img {
                    width: 198px;
                    height: 198px;
                }

                p {
                    font-size: 14px;
                    color: #666;
                    line-height: 26px;
                }

                span:nth-of-type(1) {
                    font-size: 16px;
                    color: #f60;
                    line-height: 26px;
                }

                span:nth-of-type(2) {
                    color: #d2d2d2;
                    text-decoration: line-through;
                }
            }
        }
    }
}



//内容第二部分
.content2 {
    height: 654px;

    // 标题部分
    h2 {
        text-align: center;
        width: 329px;
        height: 56px;
        line-height: 46px;
        font-size: 30px;
        margin: 60px auto;
        background: url(../imgs/sprite1.png) no-repeat;
        background-size: 329px 56px;
    }

    // 两个盒子样式抽取
    .com {
        width: 585px;
        height: 410px;
        padding: 0 25px;
        box-sizing: border-box;

        p {
            padding-top: 10px;
            font-size: 26px;
            line-height: 40px;
            font-weight: bold;

            i {
                color: #ff72fd;
            }
        }

        span {
            font-size: 16px;
            line-height: 40px;
            color: #9f9f9f;
        }

        ul {
            margin-top: 25px;
            display: flex;
            justify-content: space-between;

            li {
                width: 165px;
                height: 250px;
                position: relative;

                img {
                    width: 100%;
                    height: 100%;
                }

                span {
                    position: absolute;
                    width: 140px;
                    height: 55px;
                    text-align: center;
                    line-height: 55px;
                    color: #000;
                    border: 1px solid #fff;
                    background-color: rgba(255, 255, 255, .6);
                    top: 180px;
                    left: 12px;
                }
            }
        }
    }

    .content2-left {
        background-color: #ffdbdb;
    }

    .content2-right {
        background-color: #acd0ff;
    }

}


// 开始主体部分  抽取所有公共样式
.contentBig {
    background-color: #f4f4f4;
    padding-top: 40px;
    box-sizing: border-box;

    // 拉开两个内容之间的距离
    //版心盒子下面的第一层div
    >div>div {
        margin-bottom: 70px;
    }
}

//导航栏样式
.mian-nav {
    margin-bottom: 20px;

    p {
        width: 204px;
        height: 35px;
        font-size: 20px;
        font-weight: bold;
        line-height: 35px;
        letter-spacing: 1px;
        color: #ffffff;
        text-indent: 1em;
        background: url(../imgs/navbgc.png) no-repeat;
        background-size: 204px 35px;
    }

    span {
        float: left;
        height: 28px;
        font-size: 16px;
        line-height: 24px;
        letter-spacing: 1px;
        margin-left: 20px;
        cursor: pointer;
    }

    span:hover {
        color: #ffbd0d;
        background: url(../imgs/line.png) no-repeat;
        background-size: 30px 2px;
        background-position: center 26px;
    }

}

// 内容样式
.mian-commodity {
    display: flex;
    justify-content: space-between;

    // 左边内容样式
    .left {
        img {
            width: 260px;
            height: 330px;
        }

        ul {
            width: 260px;
            height: 130px;
            background-color: #fff;
            display: flex;
            flex-wrap: wrap;
            align-content: space-around;
            justify-content: space-around;

            li {
                border: 1px solid;
                width: 70px;
                height: 24px;
                border-radius: 24px;
                text-align: center;
                line-height: 24px;

                a {
                    color: #000;
                }
            }
        }
    }

    //中间区域
    .center {
        display: flex;
        width: 455px;
        flex-wrap: wrap;
        align-content: space-between;

        .slideshow {
            width: 100%;
            height: 300px;
            position: relative;
            overflow: hidden;

            // 轮播图部分
            .swiper-container {
                width: 100%;
                height: 100%;

            }

            .swiper-slide {
                text-align: center;
                font-size: 18px;
                background: #fff;

                /* Center slide text vertically */
                display: -webkit-box;
                display: -ms-flexbox;
                display: -webkit-flex;
                display: flex;
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                -webkit-justify-content: center;
                justify-content: center;
                -webkit-box-align: center;
                -ms-flex-align: center;
                -webkit-align-items: center;
                align-items: center;
            }
        }

        .ad {
            width: 100%;
            height: 150px;
            background: url(../imgs/contC3.png) no-repeat;

        }
    }

    // 右边区域  
    .right {
        text-align: center;

        ul {
            width: 454px;
            height: 460px;
            display: flex;
            flex-wrap: wrap;
            align-content: space-between;
            justify-content: space-between;

            li {
                width: 220px;
                height: 220px;
                background-color: #fff;
                line-height: 24px;
                color: #333;

                h4 {
                    font-size: 18px;
                }

                p {
                    font-size: 12px;
                }
            }
        }

    }

}

//品牌区域
.brand {
    height: 65px;

    ul {

        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-top: 10px;

        li {
            width: 128px;
            height: 65px;

            img {
                width: 128px;
                height: 65px;
            }
        }
    }

}



// 侧边导航栏

.Side-navigation-bar {
    position: absolute;
    top: 300px;
    transform: translateX(-40px);
    display: block;

    span {
        display: block;
        width: 35px;
        height: 35px;
        background-color: #fff ;
        margin-top: 5px;
        background-position: center !important;
        cursor: pointer;

        a {
            display: inline-block;
            width: 100%;
            height: 100%;
            text-align: center;
            line-height: 35px;
            background-color: #fff;
            color: white;
            transform: translateX(35px);
            display: none;
        }
    }

    span:nth-of-type(1) {
        background: url(../imgs/indexleft_14.png) no-repeat;
    }

    span:nth-of-type(2) {
        background: url(../imgs/indexleft_11.png) no-repeat;
    }

    span:nth-of-type(3) {
        background: url(../imgs/indexleft_08.png) no-repeat;
    }

    span:nth-of-type(4) {
        background: url(../imgs/indexleft_05.png) no-repeat;
    }

    span:nth-of-type(5) {
        background: url(../imgs/pop-hj.png) no-repeat;
    }

    .bgc0 {
        background-color: #93d46f !important;
    }

    .bgc1 {
        background-color: #f65727 !important;
    }

    .bgc2 {
        background-color: #bb9dee !important;
    }

    .bgc3 {
        background-color: #ff7394 !important;
    }

    .bgc4 {
        background-color: #c2ec51 !important;
    }
}